<script>
import HeadAssembly from "@/components/headAssembly.vue";

export default {
  name: "indexPage",
  components: {HeadAssembly},
  // 样式的使用
  data(){
    return{
      // class1:'box',
      // class2:['box'],
      // flag:true,
      // class3:{'box':'true'},
      // class4:[{'box':'true'},{'fs40':'flase'}]
    }
  }
}

</script>

<template>
<div id="styles">
<!--  <div class="box fs40">boxboxbox</div>-->
<!--  1、数组-->
<!--  <div :class="class1">fsfsfs</div>-->
<!--  <div :class="class2">eseses</div>-->
<!--  2、三目表达式-->
<!--  <div :class="flag?'box':'fs40'">11111</div>-->
<!--  3、对象 {‘类名’:'布尔类型的值'}-->
<!--  <div :class="class3">2222</div>-->
<!--  4、数组内置对象-->
<!--  <div :class="class4">3333</div>-->
  <head-assembly>


    <template v-slot:course>
      失败
    </template>
    <template v-slot:footer>
      成功
    </template>
  </head-assembly>
</div>
</template>

<style scoped lang="less">
.box{
  width: 400px;
  height: 400px;
  background-color:green;
}
.fs40{
  font-size:40px;
}
</style>